<template>
    <div class="lineRain">
        <h3>{{title}}</h3>
        <div id="lineChartRain" class="lineChartRain">

        </div>
    </div>
</template>

<script>
export default {
    props:['pageType'],
    watch:{
        pageType(newval){
            if(this.pageType=='rain-city'){
                this.title = '温州市(58659)过去24小时降雨|mm'
            }else if(this.pageType=='rain-county'){
                this.title = '永嘉县(58659)过去24小时降雨|mm'
            }
        }
    },
    data(){
        return{
            title:'',
            options:{
                tooltip: {
                    trigger: 'axis',
                   formatter:(params)=>{
                       console.log(params)
                       return params[0].name+'时 : '+params[0].value+'mm'
                   }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '6%',
                    top:'10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        show:false,
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#0A3857',
                        }
                    },
                    axisLabel:{
                        color:'#63E3FF'
                    },
                    data: []
                },
                yAxis: {
                    type: 'value',
                        axisLine:{
                            lineStyle:{
                                color:'#0A3857',
                            }
                        },
                        axisTick: {
                            show:false,
                        },
                        axisLabel:{
                            color:'#63E3FF'
                        },
                        splitLine:{
                            lineStyle:{
                                color:'#0A3857',
                            }
                        }
                },
                series: [{
                    data: [8,12,14,15,16,16,17,23,23,22,21,22,20,21,25,28,29,12,17,18,19,22,31,12],
                    type: 'line',
                    symbol:'none',
                    areaStyle: {
                        normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#0A96F2" },
                  { offset: 1, color: "#242955" }
                ])
              }
                    },
                    lineStyle:{
                        normal:{color:'#65AAE4'},
                    },
                    smooth:true,
                }]
            }
        }
    },
    methods:{
        group(array, subGroupLength) {
            let index = 0;
            let newArray = [];
            while(index < array.length) {
                newArray.push(array.slice(index, index += subGroupLength));
            }
            return newArray;
        },
        getTime(){
            let time = new Date().getHours()
            let timeArr = Array.from({length: 24}, (v, i) => (i+'').padStart(2,'0'));
            let end = timeArr.splice(time+1,23)
            return end.concat(timeArr)
        },
        initCharts(){
            this.options.xAxis.data = this.getTime()
            let lineChartRain = document.getElementById('lineChartRain')
            let fsize = document.body.clientWidth/1920*16
            lineChartRain.style.height = document.body.clientWidth<=1920? fsize*15+'px':'15rem'
            var myChart = this.$echarts.init(lineChartRain); 
            myChart.setOption(this.options)
        }
    },
    created(){
        if(this.pageType=='rain-city'){
            this.title = '温州市(58659)过去24小时降雨|mm'
        }else if(this.pageType=='rain-county'){
            this.title = '永嘉县(58659)过去24小时降雨|mm'
        }
    },
    mounted(){
        this.initCharts()
        this.getTime()
    }
}
</script>
<style lang="scss" scoped>
    .lineRain{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
        position: relative;
        h3{
            line-height:2.3rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            text-align:center;
            height:2.3rem;
            border:.1rem solid rgba(48, 138, 199, 0.5);
            box-shadow: 0rem 0rem .5rem .1rem rgba(48, 138, 199, 0.5) inset;
            width:25rem;
        }
        .lineChartRain{ 
            // height:15rem;
            margin-top:.5rem;
            background: linear-gradient( rgba(4, 15, 50,.2), rgba(4, 15, 50,.8),rgba(4, 15, 50,.2));
        }
    }
</style>